<html>
    <head>
        <meta charset="utf-8" />
        <title>vue test</title>
    </head>
    <body>
        <h1 id="app">测试：{{message}}</h1>
        <hr><p>版本: {{db.ver}}</p>
        <button onclick="change()">点击切换文字</button>
    </body>
    <script>
        class MyVue {
            constructor(config) {
                this.labelsHandle = {};
                this.data = JSON.parse(JSON.stringify(config.data));
                this.el = config.el;
                this.htmlHandle = document.querySelector(this.el).innerHTML;
                this.listener(this.data, this, "data", "")
                this.reView();
            }

            listener(data, parent, key, varName) {
                varName += (varName == "") ? key : "." + key;
                console.log(varName)
                if (typeof data == "object") {
                    parent = data;
                    for (var i in data) {
                        this.listener(data[i], parent, i, varName)
                    }
                } else {
                    let This = this
                    Object.defineProperty(parent, key, {
                        get: function() {
                            return data;
                        },
                        set: function(newVal) {
                            data = newVal
                            This.setLabels(data, varName);
                            This.reView()
                        }
                    })
                    this.getLabels(data, varName)
                }
            }

            getLabels(data, varName) {
                varName = varName.slice(5);
                if (typeof this.labelsHandle[varName] == "undefined") {
                    this.labelsHandle[varName] = data
                }
            }

            setLabels(data, varName) {
                varName = varName.slice(5)
                this.labelsHandle[varName] = data;
            }

            reView() {
                let element = document.querySelector(this.el)
                let html = this.htmlHandle
                for (var i in this.labelsHandle) {
                    html = html.replace(`{{${i}}}`, this.labelsHandle[i]);
                }
                element.innerHTML = html;
            }
        }
    </script>

    <script>
        var app = new MyVue( {
            el: 'body',
            data: {
                message: 'hello vue!',
                db: {
                    ver: "v1.0"
                }
            }
        });
        this.change = function() {
            app.data.message = "" + Math.random();
        }
    </script>
</html>